<template>
  <div class="tts-container">
<!--    <h1>科大讯飞语音合成</h1>-->

    <div class="form-container">

      <el-form-item label="发音人">
        <el-select v-model="form.voiceName" placeholder="请选择发音人">
          <el-option
              v-for="item in voiceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>          {{form}}
      </el-form-item>
      <el-form-item label="语速">
        <el-slider
            v-model="form.speed"
            :min="0"
            :max="100"
            :step="5"
            show-input
        />
      </el-form-item>

      <el-form-item label="音量">
        <el-slider
            v-model="form.volume"
            :min="0"
            :max="100"
            :step="5"
            show-input
        />
      </el-form-item>

      <el-form-item label="音高">
        <el-slider
            v-model="form.pitch"
            :min="0"
            :max="100"
            :step="5"
            show-input
        />
      </el-form-item>
      <el-form :model="form" label-width="120px">
        <el-form-item label="输入文本">
          <el-input
            v-model="form.text"
            type="textarea"
            :rows="4"
            placeholder="请输入要转换为语音的文本"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="convertToSpeech">
            转换为语音
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div v-if="audioUrl" class="audio-container">
      <h3>语音播放</h3>
      <audio controls :src="audioUrl" class="audio-player"></audio>
      <div class="audio-controls">
        <el-button size="small" @click="downloadAudio">
          <el-icon><Download /></el-icon> 下载音频
        </el-button>
      </div>
    </div>
    
    <el-dialog v-model="errorVisible" title="错误" width="30%">
      <span>{{ errorMessage }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="errorVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Download } from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: 'TtsView',
  components: {
    Download
  },
  setup() {
    const form = reactive({
      text: '',
      voiceName: '',
      speed:'',
      volume:'',
      pitch:''
    })
    const voiceOptions = [
      { label: '讯飞小燕', value: 'x4_xiaoyan' },
      { label: '讯飞小露', value: 'x4_yazi' },
      { label: '讯飞许久', value: 'aisjluxu' },
      { label: '讯飞小婧', value: 'aisjinger' },
      { label: '讯飞许小宝', value: 'aisbabyxu' },
      { label: '千惠', value: 'qianhui' },
      { label: 'Ryan', value: 'x4_enus_ryan_assist' },
      { label: 'ZhongCun', value: 'x2_JaJp_ZhongCun' },
      { label: '中村樱', value: 'x4_jajp_zhongcun_assist' },

    ]
    const loading = ref(false)
    const audioUrl = ref('')
    const errorVisible = ref(false)
    const errorMessage = ref('')
    
    // API base URL - change this to match your backend URL
    const API_BASE_URL = 'http://localhost:8081/api/tts'
    
    const convertToSpeech = async () => {
      if (!form.text.trim()) {
        errorMessage.value = '请输入要转换的文本'
        errorVisible.value = true
        return
      }
      
      loading.value = true
      
      try {
        const response = await axios.post(`${API_BASE_URL}/convert`, {
          text: form.text,
          voiceName: form.voiceName,
          speed: form.speed,
          volume: form.volume,
          pitch: form.pitch
        })
        
        if (response.data && response.data.audioFile) {
          audioUrl.value = `${API_BASE_URL}/audio/${response.data.audioFile}`
        } else {
          throw new Error('转换失败，请重试')
        }
      } catch (error) {
        console.error('Error converting text to speech:', error)
        errorMessage.value = error.response?.data?.error || '转换失败，请重试'
        errorVisible.value = true
      } finally {
        loading.value = false
      }
    }
    
    const downloadAudio = () => {
      if (!audioUrl.value) return
      
      const link = document.createElement('a')
      link.href = audioUrl.value
      link.download = `tts_audio_${Date.now()}.mp3`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    
    return {
      form,
      loading,
      audioUrl,
      errorVisible,
      errorMessage,
      voiceOptions,
      convertToSpeech,
      downloadAudio
    }
  }
}
</script>

<style scoped>
.tts-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.form-container {
  margin-bottom: 30px;
}

.audio-container {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.audio-player {
  width: 100%;
  margin: 15px 0;
}

.audio-controls {
  display: flex;
  justify-content: flex-end;
}
</style> 